import Compatibility from "../_compatibility-with-comments.mdx";

# Safe Area Insets

## Overview

Safe Area Insets are the area of the screen that is not covered by the notch, home indicator, or rounded corners. This is the area where you should place your content to ensure it is not obscured by the system UI.

## Usage (native)

On native, the safe area measurements are provided by [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context). You will need to wrap your app with the `SafeAreaProvider` and use the `useSafeAreaEnv` hook to get the safe area insets.

The `useSafeAreaEnv()` object should be added to the style prop of a View or any other `cssInterop` enabled component

The safe area class will only work on the component that has the `useSafeAreaEnv` styles, and any components within its render tree.

```tsx
import { View } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { useSafeAreaEnv } from "nativewind";

export function MyApp(props) {
  // Make sure you have the SafeAreaProvider at the root of your app
  return (
    <SafeAreaProvider>
      <SafeAreaEnv {...props} />
    </SafeAreaProvider>
  );
}

function SafeAreaEnv() {
  // Add the safe area insets to the render tree
  return <View {...props} style={[style, useSafeAreaEnv()]} />;
}

// Now you can use the safe area className
export function MyComponent({ className, ...props }) {
  return <View className={`p-safe ${className}`} {...props} />;
}
```

:::tip

Expo Router adds the \<SafeAreaProvider /> to every route. You only need to add `useSafeAreaEnv()` to your root layout.

```tsx
import { View } from "react-native";
import { Slot } from "expo-router";
import { useSafeAreaEnv } from "nativewind";

export default function MyLayout() {
  return (
    // Add the safe area insets to the render tree
    <View {...props} style={[style, useSafeAreaEnv()]}>
      <Slot />
    </View>
  );
}
```

:::

## Usage (web)

On web, your CSS StyleSheet will use the [CSS `env()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/env) and no extra setup is needed.

`useSafeAreaEnv()` returns `undefined` on web.

The `h-screen-safe` and `min-h-screen-safe` utilities may not work as expected on Google Chrome. Add height: `-webkit-fill-available` on parent nodes:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    height: -webkit-fill-available;
  }

  body {
    height: -webkit-fill-available;
  }

  #root {
    height: -webkit-fill-available;
  }
}
```

## Compatibility

<Compatibility
  supported={[
    [
      "m-safe",
      <code>{`{ 
  marginTop: env(safe-area-inset-top);
  marginBottom: env(safe-area-inset-bottom);
  marginLeft: env(safe-area-inset-left);
  marginRight: env(safe-area-inset-right);
}`}</code>,
    ],
    [
      "p-safe",
      <code>{`{ 
  paddingTop: env(safe-area-inset-top);
  paddingBottom: env(safe-area-inset-bottom);
  paddingLeft: env(safe-area-inset-left);
  paddingRight: env(safe-area-inset-right);
}`}</code>,
    ],
    [
      "mx-safe",
      <code>{`{ 
  marginLeft: env(safe-area-inset-left);
  marginRight: env(safe-area-inset-right);
}`}</code>,
    ],
    [
      "px-safe",
      <code>{`{ 
  paddingLeft: env(safe-area-inset-left);
  paddingRight: env(safe-area-inset-right);
}`}</code>,
    ],
    [
      "my-safe",
      <code>{`{ 
  marginTop: env(safe-area-inset-top);
  marginBottom: env(safe-area-inset-bottom);
}`}</code>,
    ],
    [
      "py-safe",
      <code>{`{ 
  paddingTop: env(safe-area-inset-top);
  paddingBottom: env(safe-area-inset-bottom);
}`}</code>,
    ],
    [
      "mt-safe",
      <code>{`{ 
  marginTop: env(safe-area-inset-top);
}`}</code>,
    ],
    [
      "pt-safe",
      <code>{`{ 
  paddingTop: env(safe-area-inset-top);
}`}</code>,
    ],
    [
      "mr-safe",
      <code>{`{ 
  marginRight: env(safe-area-inset-top);
}`}</code>,
    ],
    [
      "pr-safe",
      <code>{`{ 
  paddingRight: env(safe-area-inset-top);
}`}</code>,
    ],
    [
      "mb-safe",
      <code>{`{ 
  marginBottom: env(safe-area-inset-top);
}`}</code>,
    ],
    [
      "pb-safe",
      <code>{`{ 
  paddingBottom: env(safe-area-inset-top);
}`}</code>,
    ],
    [
      "ml-safe",
      <code>{`{ 
  marginLeft: env(safe-area-inset-top);
}`}</code>,
    ],
    [
      "pl-safe",
      <code>{`{ 
  paddingLeft: env(safe-area-inset-top);
}`}</code>,
    ],
    [
      "*-safe-or-[n]",
      <div>
        <code>*</code> can be subsitued for any spacing utiltity.
        <br />
        <code>[n]</code> can be subsitued for any spacing value.
        <code>{`
// example using mt
.mt-safe-or-4 = {
  marginTop: max(env(safe-area-inset-top), 1rem);
}`}</code>
      </div>,
    ],
  ]}
  none={[
    [
      "h-screen-safe",
      <code>{`{
  height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))
}`}</code>,
    ],
    [
      "*-safe-offset-[n]",
      <div>
        <code>*</code> can be subsitued for any spacing utiltity.
        <br />
        <code>[n]</code> can be subsitued for any spacing value.
        <code>{`
// example using mt
.mt-safe-offset-4 = {
  marginTop: calc(env(safe-area-inset-top) + 1rem);
}`}</code>
      </div>,
    ],
  ]}
/>
